<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
	</head>
	<body style="font-size: 12pt">
        <span><span>
        <strong><span><span><span><span><span><span><span style="font-family: Tahoma"><span
            style="font-size: 10pt">
            <span style="color: #3399cc">CodeFish - A user study of fisheye visualization of source code</span><br />
        </span></span>
        </span></span>
        </span></span>
        </span></span>
        </strong><span style="color: #424242"><span><span><span><span>
            <span><span style="font-family: Tahoma"><span style="font-size: 10pt">Please take the time to read this introduction. It will be available as
        a reference manual at all times through the tab interface above.<br />
            <br />
            When you have finished reading this introduction please click on task list 1 in
            the tab interface above.<br />
            <br />
            <strong>Below is an overview of the various elements in the user interface</strong><br />
            <br />
            <center><img src="CodeFish-Plan.jpg" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; align: center" /><br /></center>
            <strong></strong></span></span></span></span></span></span>
        </span>
        </span></span></span>
        <ul>
            <li><span><span><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span><span><span style="color: #424242"><span>
                <strong>Focus area - </strong>
        <span style="color: #000000;">The sightly yellowish area.</span></span></span></span></span>
                No distortion of the code is performed here.</span></span></span></span></span></span></li><li><span><span><span style="color: #424242"><span>
                <span style="color: #000000;"></span><span><span><span><span><span style="font-family: Tahoma">
                    <span style="font-size: 10pt">
        <span><span><span style="color: #424242;"><strong>
            Context area -
        </strong></span></span></span>
        <span style="color: #000000;">The area above and below the
                focus area. Empty lines,
            comments and preprocessor statements
            &nbsp; are always filtered out.</span></span></span></span></span></span></span></span></span></span></span><span
                style="font-size: 10pt; font-family: Tahoma"> All other selection depends on the
                fisheye strategy.</span></li><li><span><span><span style="color: #424242"><span>
                <span style="color: #000000;"></span><span><span><span><span><span style="font-family: Tahoma">
                    <span style="font-size: 10pt">
        <span><span><span style="color: #424242;"><strong>
            Overview area -
        </strong></span></span></span>
        <span style="color: #000000;">Creates a visual overview of the code structure and length.</span></span></span></span></span></span></span></span></span></span></span></li></ul>
        <span><span><span style="color: #424242"><span>
            <center><img src="CodeFish-Things.jpg" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; font-size: 10pt; font-family: Tahoma;" /><br /></center>
            <br />
        </span></span></span></span><span>
            <strong></strong> </span>
        <ul>
            <li><span><span><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span><strong>Referenced lines</strong>
                - Lines containing variables or methods used within
            the focus area are highlighted with a light blue background color.</span> </span></span>
            </span></span>
            </span></span>
            </li>
            <li><span><span><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span><strong>Selected line</strong>
                - The line below the mouse pointer is highlighted with blue.</span> </span></span>
            </span></span>
            </span></span>
            </li>
            <li><span><span><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span><strong>Connectors </strong>-
                Each visible line in the code view are connected to its location in the overview.</span>
            </span></span>
            </span></span>
            </span></span></li>
        </ul>
        <strong><span style="font-size: 10pt; color: #424242; font-family: Tahoma">
            Navigation</span></strong><ul>
            <li><span style="font-family: Tahoma"><span style="font-size: 10pt"><span><span><span style="color: #424242;"><span><span><strong>Keyboard - </strong>Up and down arrow, Page Up, Page
      Down, Home and End</span></span></span><span style="color: #424242;"> moves the
      focus area.</span></span></span> </span></span></li>
                <li><span style="font-family: Tahoma"><span style="font-size: 10pt"><span><span><strong>Mouse</strong>
                    - Scroll wheel moves focus area up and down. Clicking in context view or overview
                    centers the focus area at the clicked line. Click + drag in the overview moves the
                    focus area accordingly.</span></span> </span></span></li>
        </ul>
        <p>
            <strong><span style="font-size: 10pt; color: #424242; font-family: Tahoma">Searching
                in the source code</span></strong></p>
        <ul>
            <li><span style="font-family: Tahoma"><span style="font-size: 10pt"><span><span><span style="color: #424242;">
                Press '<strong>CTRL
                +
                F'</strong> or c</span><span style="color: #424242;">lick the <strong>'Find' button</strong>
                    in the main toolbar to show the find dialog</span></span></span> </span></span>
            </li>
            <li><span><span><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span style="color: #424242;">
                <strong>ESC</strong> closes the dialog</span> </span></span></span></span></span></span></li>
        </ul>
        <p>
            <span style="font-size: 10pt; font-family: Tahoma"><strong>Fisheye strategies</strong></span></p>
        <ul>
            <li><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt"><span><span><span><strong>Semantic</strong>
                - Lines in the context area are selected according to predefined semantic and syntactic
                rules. Rules include prefering block statements such as loops and conditions and
                closing brackets.</span></span></span> </span></span></span></span></li>
            <li><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt"><span><span><strong>Dynamic</strong>
                - Regions in the context area are chosen from user interaction history. Regions
                which have been in focus for long are weighted heigher and regions visited half
                a minute ago are chosen preference of those visited five minutes ago.</span></span>
            </span></span>
            </span></span></li>
        </ul>
        <p>
            <span style="font-size: 10pt; font-family: Tahoma"><strong>Introductionary exercises</strong></span></p>
        <ul>
            <li><span style="font-size: 10pt; font-family: Tahoma">Move the focus area through the
                source code to line 255 and determine in what line the field datesFont is declared.</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Locate the method DrawTitle(...)
                and determine in what line it is declared.</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Locate line 321 and state how
                many for, if, case, switch, foreach and else statements enclose it.</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Please determine wether the field
                borderColor is encapsulated correctly. I.e. are protected from external reference
                and corresponding a corrosponding property with get- and/or set-methods exist.</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Please state the first line of
                the method called last in the set-method of the property DaysNotInMonthToDraw.</span></li>
            <li><span style="font-family: Tahoma"><span style="font-size: 10pt"><span>Now please select the dynamic
                fisheye approach by selecting the menu item 'Edit' -&gt; 'Strategies' -&gt; 'Dynamic
                DOI'</span> </span></span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Please describe the functionality
                of the method HitTest(...)</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">In the method OnMouseClick(...)
                please state the line containing the first call to the method HitTest(...)</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">How many for, if and else statements
                enclose line 333 of the method LoadDates()?</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">Find the first use of the constant
                TITLE_HEIGHT in the method HitTest(...)</span></li>
            <li><span style="font-size: 10pt; font-family: Tahoma">State the line containing the
                declaration of the constant TITLE_HEIGHT. </span></li>
        </ul>
        <p>
            <strong><span style="font-size: 10pt; font-family: Tahoma">Tasks on the next tab</span></strong></p>
        <ul>
            <li><strong></strong><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt">
                <span>Please try to
                answer the tasks on the following two tabs as fast and precise as possible without
                asking questions during the experiment.</span> </span></span></span></span></li>
            <li><span><span><span style="font-family: Tahoma"><span style="font-size: 10pt"><span>The source code for the tasks
                as well as the fisheye strategy is automatically changed when the task set is changed.</span>
            </span></span>
            </span></span></li>
        </ul>
        <strong></strong>
	
	</body>
</html>